<template>

	<el-container  class="article-list" style="height: 100%;">
  		<el-header class="header" height="50px">
  			<div class="header-left">上海 晴 2° / 15°</div>
  			<div class="header-right">鼎牛产品</div>
  		</el-header>
  		<el-container class="article-container">
  			<!-- 文章标签 -->
    		<el-aside class="nav-wrap" width="200px">
    			<!-- logo -->
    			<a class="logo-wrap" href="">
    				<img class="logo" :src="logo">
    			</a>
    			<!-- nav -->
    			<ul class="nav">
    				<li v-for="(item,key) in catagoryList" :key="key" class="nav-item" :class="{'current':item.active}" @click="cataNavClick(key,item,catagoryList)">{{item.name}}</li>
    			</ul>
    		</el-aside>
    		<el-main class="main-content-wrap">

    			<el-row class="main-content" v-infinite-scroll="getArticleList" infinite-scroll-disabled="disabled" :gutter="40" >
    				
    				<el-col v-if="articleListData.length==0" class="article-list" :span="16">
    					<el-image
		  					fit="fill"
		  					:src="nodata"
		  				></el-image>
    				</el-col>

    				<!-- 正文列表 -->
				  	<el-col v-if="articleListData.length>0" class="article-list" :span="16">
				  		
				  		

					  		<template v-for="(item,index) in articleListData">
					  			
					  			<li :key="index" v-if="isSingle(item)" class="article-list-item single-list-item" @click="goDetail(item)">
						  			<div class="img-wrap">
						  				<div class="img-item-content">
						  					<el-image
						  						lazy
						  						class="img-item" 
							  					fit="fill"
							  					:src="imgPrefix+item.thums[0]"
							  				>
							  					<div class="error-img" slot="error">
							  						<img :src="defaultImg">
							  					</div>
							  				</el-image>
						  				</div>

						  			</div>
						  			<div class="item-sum-box">
						  				<div class="box-inner">
							  				<p class="title">{{item.title}}</p>
							  				<div class="footer-bar">
							  					<el-tag effect="plain" size="mini">{{item.categoryName}}</el-tag>
							  					
							  					<!-- <span class="dot">·</span>
							  					<span class="remark">4790评论</span> -->
							  					<!-- <span class="dot">·</span> -->
							  					<span class="time">{{ convertTime(item) }}</span>
							  				</div>
							  			</div>	
						  			</div>
					  			</li>


					  			<li :key="index" v-if="!isSingle(item)" class="article-list-item multi-thum" @click="goDetail(item)">
						  			<div class="item-sum-box">
						  				<p class="title">{{item.title}}</p>
						  			</div>

						  			<div class="img-wrap">
						  				<div class="img-item-content" v-for="(thum,key) in item.thums">
						  					<el-image
						  						lazy
						  						class="img-item" 
							  					fit="fill"
							  					:src="imgPrefix+thum"
							  				>
							  					<div class="error-img" slot="error">
							  						<img :src="defaultImg">
							  					</div>
							  				</el-image>
						  				</div>

						  			</div>

					  			
						  			<div class="item-sum-box">
						  				<div class="footer-bar">
							  					<el-tag effect="plain" size="mini">{{item.categoryName}}</el-tag>
							  					
							  					<!-- <span class="dot">·</span>
							  					<span class="remark">4790评论</span> -->
							  					<!-- <span class="dot">·</span> -->
							  					<span class="time">{{ convertTime(item) }}</span>
							  				</div>
						  			</div>
					  			</li>

					  		</template>
					  		
				  		
					  		<p v-if="dataLoading" style="text-align: center;">加载中...</p>
	    					<p v-if="noMoreData" style="text-align: center;">没有更多了</p>
				  			

				  		

				  		

				  		
				  	</el-col>

				  	<!-- 广告 -->
				  	<el-col :span="8">
				  		<!-- 搜索区域 -->
				  		<div class="search-input-wrap">
				  			<el-input
				  				class="search-input"
							    placeholder="请输入要搜索的内容"
							    v-model="searchKeyword">

							    <el-button slot="suffix" class="orange" type="primary" @click="keywordSearch">搜索</el-button>
							</el-input>
				  		</div>
				  		

				  		<!-- 登录注册 -->
				  		<div class="login-reg-wrap">
				  			<!-- 用户信息页 -->
				  			<div v-if="token" class="user-info-wrap">
				  				<div class="opearte-wrap">
				  					<span class="log-out" @click="logOut">退出</span>
				  				</div>

				  				<div class="avatar-wrap">
				  					<img :src="avatar">
				  					<span class="user-name">{{ userInfo.name }}</span>
				  				</div>
				  			</div>

				  			<!-- 登陆注册页 -->
				  			<el-tabs v-if="!token" class="login-reg-tabs" v-model="loginReg">
							    <el-tab-pane label="登陆" name="login">
							    	
							    	<el-form>
							    		<el-form-item>
							    			<el-input prefix-icon="el-icon-user-solid" placeholder="手机号"></el-input>
							    		</el-form-item>

							    		<el-form-item>
							    			<el-input prefix-icon="el-icon-lock" placeholder="密码"></el-input>
							    		</el-form-item>

							    		<el-form-item>
							    			<el-button class="orange form-submit" type="primary">提交</el-button>
							    		</el-form-item>
							    	</el-form>

							    </el-tab-pane>

							    <el-tab-pane label="注册" name="reg">
							    	<div class="reg-guide">
							    		<div class="guide-img-wrap">
							    			<img :src="guideImg">
							    		</div>
							    		<div class="guide-opearte">
							    			<span @click="goRegister">
							    				<i class="icon iconfont ipc-go"></i>
							    				<span>前往注册</span>
							    			</span>
							    		</div>
							    	</div>
							    </el-tab-pane>
							</el-tabs>

				  		</div>
				  	</el-col>
				</el-row>


			</el-main>

  		</el-container>
	</el-container>

</template>

<script>
	import { mapGetters } from 'vuex'
	import { cateList, articleList } from "@/api/content/list"
	import { deepClone } from "@/utils/util"
	import { baseUrl } from '@/config/env';

	//获取图片的url
	const imgPrefix = baseUrl+'/rest/common/preview/';

	export default{
		data(){
			return{
				baseUrl:baseUrl,
				//无限滚动的loading
				dataLoading:false,
				//服务器图片前缀
            	imgPrefix:imgPrefix,
            	//无数据默认图
            	nodata:require("@/assets/dingNiu/nodata.png"),
            	defaultImg:require("@/assets/dingNiu/default.jpg"),
				logo:require("@/assets/logo.png"),
				//文章关键词搜索
				searchKeyword:'',
				//登录还是注册
				loginReg:'login',
				guideImg:require('@/assets/dingNiu/reg-guide.png'),
				catagoryList:[],
				articleListData:[],
				//当前cateid
				curCategoryId:'',
				page:{
					pageSize:10,
					currentPage:1,
					total:999
				}
			}
		},
		mounted(){
			//设置cata
			//this.init();
			this.getCateList();
			//this.getArticleList();
		},
		computed:{
			...mapGetters([
				'token',
      			'userInfo',
      			'avatar'
			]),
			noMoreData(){
				return this.articleListData.length >= this.page.total;
			},
			
	      	disabled () {
	        	return this.dataLoading || this.noMoreData;
      		}
		},
		watch:{
			curCategoryId(val){
				this.getArticleList('refresh');
			}
		},
		methods:{
			init(){
				//设置面包屑层级
				this.$store.dispatch('setLevel',{level:0,data:{name:'首页',url:'/content/index'}})

				var cateId = this.$route.query.cateId;
				if (cateId) {
					this.curCategoryId = cateId;
					for(var i=0;i<this.catagoryList.length;i++){
						
						if(this.catagoryList[i].id == cateId){
							this.catagoryList[i].active = true;
						}else{
							this.catagoryList[i].active = false;
						}
					}
				}
			},
			//获取文章标签
			getCateList(){


				cateList().then((res)=>{
					console.log("-------前端页面获取文章分类--------")
					console.log(res)
					var all = {name:'全部',id:'',active:true};
					var result = res.data.data;

					for(var i=0;i<result.length;i++){
						result[i]["active"] = false;
					}

					result.unshift(all);
					this.catagoryList = result;

					this.init();
				})
			},
			//获取文章列表
			getArticleList(type){
				if(type=='refresh'){
					this.articleListData = [];
					this.page.currentPage = 1;
					this.page.total = 0;
				}

				this.dataLoading = true;
				articleList(this.page.currentPage,this.page.pageSize,this.curCategoryId,this.searchKeyword,1).then((res)=>{
					console.log("-------前端页面获取文章列表--------")
					console.log(res)
					
					this.page.currentPage++;
					this.page.total = res.data.data.total;

					if(res.data.data.records.length>0){
						this.articleListData = this.articleListData.concat(this.convertArticleData(res.data.data.records));
					}
					
					this.dataLoading = false;
					console.log(this.articleListData)
				})
			},
			//关键词搜索
			keywordSearch(){
				this.getArticleList('refresh');
			},
			//重构获取的文章列表数据
			convertArticleData(data){
				var result = deepClone(data);
				for(var i=0;i<result.length;i++){
					if(result[i].converIds === ""){
						result[i]["thums"] = [];
					}else{
						result[i]["thums"] = result[i].converIds.split(',');
					}
					
				}
				return result;
			},
			//判断是否多图
			isSingle(item){
				var thums = item.thums;
				var temp_arr = [];
				if(thums.length == 0){
					return true;
				}

				for(var i=0;i<thums.length;i++){
					if(thums[i]){
						temp_arr.push(thums[i])
					}
				}

				
				if(temp_arr.length>1){
					return false;
				}

				return true;
			},
			//跳转文章详情
			goDetail(item){

				//添加面包屑
				this.$store.dispatch('setLevel',{level:1,data:{name:item.categoryName,url:`/content/index?cateId=${item.categoryId}`}})

				this.$router.push({
					path:`/content/detail/${item.id}`,
					query:{
						cateId:item.categoryId
					}
				})
			},
			//转换时间
			convertTime(item){
				return item.createTime
			},
			//点击文章分类导航
			cataNavClick(index,item,list){
				if(item.active == true){
					return;
				}

				for(var i=0;i<list.length;i++){
					list[i].active = false;
				}

				item.active = true;
				this.curCategoryId = item.id;
				this.$router.replace({
					path:'/content/index',
					query:{
						cateId:this.curCategoryId
					}
				})
			},
			//前往注册页
			goRegister(){
				this.$router.push({
					path:'/register'
				})
			},
			//退出
			logOut() {
		      this.$store.dispatch('user/logout')
		    },
		},

	}

</script>


<style>
	/*修改登陆tab样式*/
	.login-reg-tabs .el-tabs__nav{
		width: 100%;
		display: flex;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item{
		flex: 1;
		padding: 0;
		text-align: center;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item.is-active,.login-reg-tabs .el-tabs__nav .el-tabs__item:hover{
		color: #FF8100;
	}

	.login-reg-tabs .el-tabs__active-bar{
		background-color: #FF8100;
	}

	.article-list .el-header{
		padding: 0;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}

	.search-input-wrap .el-input__suffix{
		right: 0;
	}

	.search-input-wrap .search-input input{
		background-color: #f5f6f7;
	}
	.search-input-wrap .search-input input:focus{
		border-color: #ff8100;
	}
</style>


<style scoped>
	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.article-container{
		
		margin-top: 50px;
		box-sizing: border-box;
		height: 100%;
		overflow: auto;
	}

	.nav-wrap{
		padding: 20px 40px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}

	.nav{
		list-style: none;
		width: 100%;
		padding: 0;
		margin-top: 0;
		text-align: center;
	}

	.nav .nav-item{
		width: 100%;
		border-radius: 4px;
		padding: 5px 0;
		background-color: #FFFFFF;
		color: #444;
		font-size: 16px;

	}

	.main-content-wrap{
		padding-right: 40px;
	}
	.nav .nav-item.current{
		background-color: #FF8100;
		color: #ffffff;
	}

	.nav .nav-item:hover {
	    animation-name: hvr-back-pulse;
	    animation-duration: .2s;
	    animation-timing-function: linear;
	    animation-iteration-count: 1;
	    background-color: #FF8100;
	    color: #fff;
	}

	@keyframes hvr-back-pulse{
		0%{
			background-color:rgba(255,129,0,.6)
		}
		50%{
			background-color:rgba(255,129,0,.76)
		}	
	}

	/*正文列表*/
	.article-list-item{
		list-style: none;
		display: flex;
		flex-direction: row;
		padding: 10px 0;
		border-bottom: 1px solid #e8e8e8;
		cursor: pointer;
	}

	/*单图*/
	.single-list-item .img-wrap .img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 10px;
		overflow: hidden;
	}


	.single-list-item .item-sum-box{
		display: flex;
    	align-items: center;
	}
	
	.single-list-item .img-wrap .img-item-content .img-item{
		max-width: 100%;
	    height: auto;
	    vertical-align: middle;
	}

	.error-img,.error-img>img{
		width: 100%;
		height: 100%;
	}
	/*多图*/
	.article-list-item.multi-thum{
		flex-direction: column;
	}

	.article-list-item.multi-thum .img-wrap{
		width: 100%;
		display: flex;
    	flex-direction: row;
		margin-bottom: 10px;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 5px;
		overflow: hidden;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content>.img-item{
		max-width: 100%;
	    height: 100%;
	    vertical-align: middle;
	}

	.item-sum-box{
		flex-grow: 1;
	}

	.item-sum-box .title{
		font-size: 20px;
		font-weight: 700;
		color: #222;
		line-height: 1.3;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.footer-bar .source,.footer-bar .remark{
		font-size: 14px;
		color: #777;
	}

	.footer-bar .dot{
		color: #666;
	}

	.footer-bar .time{
		font-size: 14px;
		color: #888;
	}

	/*右侧登陆*/
	.login-reg-wrap{
		background: #f4f5f6;
		padding: 20px;
	}

	.user-info-wrap{
		background: #fff;
		border:1px solid #e8e8e8;
		padding: 20px;
	}
	.user-info-wrap .opearte-wrap{
		margin-bottom: 10px;
		text-align: right;
	}

	.user-info-wrap .opearte-wrap .log-out{
		color: #aaabac;
		cursor: pointer;
		transition: all 0.3s;
	}
	.user-info-wrap .opearte-wrap .log-out:hover{
		color: #FF8100;
	}

	.user-info-wrap .avatar-wrap{
		text-align: center;
	}

	.user-info-wrap .avatar-wrap img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: block;
    	margin: auto;
	}
	.user-info-wrap .avatar-wrap .user-name{
		padding-top: 10px;
		display: inline-block;
	}

	.login-reg-tabs{
		background: #ffffff;
		padding-left: 20px;
		padding-right: 20px;
	}

	.reg-guide,.guide-img-wrap{
		width: 100%;
	}

	.guide-img-wrap img{
		width: 100%;
	}

	.guide-opearte{
		text-align: center;
		margin: 10px 0 20px;
		
	}

	.guide-opearte>span{
		cursor: pointer;
	}

	.guide-opearte span,.guide-opearte i{
		color: #cacaca;
		transition: all .3s;
	}
	.guide-opearte i{
		vertical-align: middle;
	}

	.guide-opearte:hover span,.guide-opearte:hover i{
		color: #FF8100;
	}

	.form-submit{
		width: 100%;
	}


	.search-input-wrap{
		margin-bottom: 20px;
	}


</style>

